﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>css-js对照表</title>
		<style type="text/css">
			table {
				border: 2px #0C3 solid;
				border-collapse: collapse;
				float: left;
				margin-right: 30px;
			}
			
			table th,
			td {
				border: 2px #0C3 solid;
				padding: 5px;
			}
			
			th {
				background-color: #03C;
				color: #fff;
			}
			
			col {
				background-color: #eee;
			}
		</style>
	</head>

	<body>
		<h1>直接运行html查看本表格效果</h1>
		<table>
			<col>
			<TR>
				<th>CSS语法（不区分大小写）</th>
				<th>JavaScript语法（区分大小写）</th>
			</TR>
			<TR>
				<TD>border</TD>
				<TD>border</TD>
			</TR>
			<TR>
				<TD>border-bottom</TD>
				<TD>borderBottom</TD>
			</TR>
			<TR>
				<TD>border-bottom-color</TD>
				<TD>borderBottomColor</TD>
			</TR>
			<TR>
				<TD>border-bottom-style</TD>
				<TD>borderBottomStyle</TD>
			</TR>
			<TR>
				<TD>border-bottom-width</TD>
				<TD>borderBottomWidth</TD>
			</TR>
			<TR>
				<TD>border-color</TD>
				<TD>borderColor</TD>
			</TR>
			<TR>
				<TD>border-left</TD>
				<TD>borderLeft</TD>
			</TR>
			<TR>
				<TD>border-left-color</TD>
				<TD>borderLeftColor</TD>
			</TR>
			<TR>
				<TD>border-left-style</TD>
				<TD>borderLeftStyle</TD>
			</TR>
			<TR>
				<TD>border-left-width</TD>
				<TD>borderLeftWidth</TD>
			</TR>
			<TR>
				<TD>border-right</TD>
				<TD>borderRight</TD>
			</TR>
			<TR>
				<TD>border-right-color</TD>
				<TD>borderRightColor</TD>
			</TR>
			<TR>
				<TD>border-right-style</TD>
				<TD>borderRightStyle</TD>
			</TR>
			<TR>
				<TD>border-right-width</TD>
				<TD>borderRightWidth</TD>
			</TR>
			<TR>
				<TD>border-style</TD>
				<TD>borderStyle</TD>
			</TR>
			<TR>
				<TD>border-top</TD>
				<TD>borderTop</TD>
			</TR>
			<TR>
				<TD>border-top-color</TD>
				<TD>borderTopColor</TD>
			</TR>
			<TR>
				<TD>border-top-style</TD>
				<TD>borderTopStyle</TD>
			</TR>
			<TR>
				<TD>border-top-width</TD>
				<TD>borderTopWidth</TD>
			</TR>
			<TR>
				<TD>border-width</TD>
				<TD>borderWidth</TD>
			</TR>
			<TR>
				<TD>clear</TD>
				<TD>clear</TD>
			</TR>
			<TR>
				<TD>float</TD>
				<TD>floatStyle</TD>
			</TR>
			<TR>
				<TD>margin</TD>
				<TD>margin</TD>
			</TR>
			<TR>
				<TD>margin-bottom</TD>
				<TD>marginBottom</TD>
			</TR>
			<TR>
				<TD>margin-left</TD>
				<TD>marginLeft</TD>
			</TR>
			<TR>
				<TD>margin-right</TD>
				<TD>marginRight</TD>
			</TR>
			<TR>
				<TD>margin-top</TD>
				<TD>marginTop</TD>
			</TR>
			<TR>
				<TD>padding</TD>
				<TD>padding</TD>
			</TR>
			<TR>
				<TD>padding-bottom</TD>
				<TD>paddingBottom</TD>
			</TR>
			<TR>
				<TD>padding-left</TD>
				<TD>paddingLeft</TD>
			</TR>
			<TR>
				<TD>padding-right</TD>
				<TD>paddingRight</TD>
			</TR>
			<TR>
				<TD>padding-top</TD>
				<TD>paddingTop</TD>
			</TR>
		</table>
		<table>
			<col>
			<TR>
				<th>CSS 语法（不区分大小写）</th>
				<th>JavaScript 语法（区分大小写）</th>
			</TR>
			<TR>
				<TD>background</TD>
				<TD>background</TD>
			</TR>
			<TR>
				<TD>background-attachment</TD>
				<TD>backgroundAttachment</TD>
			</TR>
			<TR>
				<TD>background-color</TD>
				<TD>backgroundColor</TD>
			</TR>
			<TR>
				<TD>background-image</TD>
				<TD>backgroundImage</TD>
			</TR>
			<TR>
				<TD>background-position</TD>
				<TD>backgroundPosition</TD>
			</TR>
			<TR>
				<TD>background-repeat</TD>
				<TD>backgroundRepeat</TD>
			</TR>
			<TR>
				<TD>color</TD>
				<TD>color</TD>
			</TR>

			<TR>
				<TD>display</TD>
				<TD>display</TD>
			</TR>
			<TR>
				<TD>list-style-type</TD>
				<TD>listStyleType</TD>
			</TR>
			<TR>
				<TD>list-style-image</TD>
				<TD>listStyleImage</TD>
			</TR>
			<TR>
				<TD>list-style-position</TD>
				<TD>listStylePosition</TD>
			</TR>
			<TR>
				<TD>list-style</TD>
				<TD>listStyle</TD>
			</TR>
			<TR>
				<TD>white-space</TD>
				<TD>whiteSpace</TD>
			</TR>

			<TR>
				<TD>font</TD>
				<TD>font</TD>
			</TR>
			<TR>
				<TD>font-family</TD>
				<TD>fontFamily</TD>
			</TR>
			<TR>
				<TD>font-size</TD>
				<TD>fontSize</TD>
			</TR>
			<TR>
				<TD>font-style</TD>
				<TD>fontStyle</TD>
			</TR>
			<TR>
				<TD>font-variant</TD>
				<TD>fontVariant</TD>
			</TR>
			<TR>
				<TD>font-weight</TD>
				<TD>fontWeight</TD>
			</TR>

			<TR>
				<TD>letter-spacing</TD>
				<TD>letterSpacing</TD>
			</TR>
			<TR>
				<TD>line-break</TD>
				<TD>lineBreak</TD>
			</TR>
			<TR>
				<TD>line-height</TD>
				<TD>lineHeight</TD>
			</TR>
			<TR>
				<TD>text-align</TD>
				<TD>textAlign</TD>
			</TR>
			<TR>
				<TD>text-decoration</TD>
				<TD>textDecoration</TD>
			</TR>
			<TR>
				<TD>text-indent</TD>
				<TD>textIndent</TD>
			</TR>
			<TR>
				<TD>text-justify</TD>
				<TD>textJustify</TD>
			</TR>
			<TR>
				<TD>text-transform</TD>
				<TD>textTransform</TD>
			</TR>
			<TR>
				<TD>vertical-align</TD>
				<TD>verticalAlign</TD>
			</TR>
		</table>
	</body>

</html>